<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        button {
            width: 100px;
            height: 36px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="root">
    {{name}}
    <h1>你好,{{name}},{{age}}</h1>
    <button @click="clickBtn">点击</button>
    <br/>
    <button @dblclick="dbclickBtn">双击</button>
    <br/>
    <button @contextmenu="contextmenu">右键</button>
    <br/>
    <button @mousedown="mousedown">鼠标按下</button>
    <br/>
    <button @mouseup="mouseup">鼠标抬起</button>
    <br/>
    <button @mouseenter="mouseenter">指针移到有事件监听的元素内</button>
    <br/>
    <button @mouseleave="mouseleave">指针移出元素范围外（不冒泡）</button>
    <br/>
    <textarea @select="selectText">阿萨健康卡上课卡死卡卡卡</textarea>
    <br/>
    <button @wheel="wheel">滚轮滑动</button>
    <br/>

    <input type="text" v-model="school" @blur="inputOnBlur" @focus="inputOnFocus">

    <button @drag="elementOndrag" draggable="true">拖拽</button>
    <br/>
    <input type="text" v-model="name">
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            school: "清华大学",
            name: "张三",
            age: "19岁",
            str: "1111",
            obj: {
                c: 1,
                a: {
                    b: 1
                }
            }
        },
        methods: {
            clickBtn() {
                console.log(this.name)
            },
            dbclickBtn() {
                console.log(222)
            },
            contextmenu() {
                console.log("右键了")

            },
            mousedown() {
                console.log("鼠标按下")
            },
            mouseup() {
                console.log("鼠标抬起")
            },
            mouseenter() {
                console.log("鼠标移动了该区域")
            },
            mouseleave() {
                console.log("鼠标移出了该区域")
            },
            selectText(event) {
                let selectedText = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
                console.log('选中的文本:', selectedText);
            },
            wheel(){
              console.log("滚轮滑动")
            },
            inputOnBlur(event){
                console.log(event.target.value)
            },
            inputOnFocus(event){
               console.log(event)
            },
            elementOndrag(event){
                console.log("正在拖拽")
            }
        }

    })
</script>
</body>
</html>